<!--  -->
<template>
  <el-form
    ref="formRef"
    class="login-content-form"
    :model="loginForm"
    :rules="loginRules"
    :disabled="loading.signIn"
  >
    <el-form-item prop="username">
      <el-input
        v-model="loginForm.username"
        type="text"
        placeholder="账号"
        prefix-icon="el-icon-user"
        clearable
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        :type="isShowPassword ? 'text' : 'password'"
        placeholder="密码"
        prefix-icon="el-icon-lock"
        autocomplete="off"
      >
        <template #suffix>
          <i
            class="mx-icon  login-content-password"
            :class="isShowPassword ? 'mx-icon-mimakejian' : 'mx-icon-mimabukejian1'"
            @click="isShowPassword = !isShowPassword"
          />
        </template>
      </el-input>
    </el-form-item>

    <el-form-item v-if="captchaOnOff" prop="code">
      <el-row :gutter="15">
        <el-col :span="14">
          <el-input
            v-model="loginForm.code"
            type="text"
            maxlength="4"
            placeholder="验证码"
            prefix-icon="el-icon-position"
            clearable
            autocomplete="off"
          />
        </el-col>
        <el-col :span="10">
          <div class="login-content-code">
            <!-- <span class="login-content-code-img">1234</span> -->
            <img :src="codeUrl" @click="getCode" class="login-content-code-img"/>
          </div>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        class="login-content-submit"
        round
        :loading="loading.signIn"
        @click="handleLogin2"
      >
        <span v-if="!loading.signIn">登 录</span>
        <span v-else>登 录 中...</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
//import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
//import { useRoute } from "vue-router";
import { login,getCodeImg } from "@/api/login";
import { ElMessage } from "element-plus";
import { initFrontEndControlRoutes } from "@/router/frontEnd";
import { initBackEndControlRoutes } from "@/router/backContro";
import { Session } from "@/utils/storage";
import { useStore } from "@/store/index";
export default defineComponent({
  name: "LoginForm",
  setup() {
    const store = useStore();
    const formRef = ref();
    const route = useRoute();
    const router = useRouter();


    const { proxy } = getCurrentInstance();

    const state = reactive({

      codeUrl: "",
      // 查看密码图标
      isShowPassword: false,
      // 验证码开关
      captchaOnOff: true,
      loginForm: {
        username: "admin",
        password: "admin123",
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: {
        signIn: false,
      },
      redirect: undefined,
    });

    const onSignIn = async () => {
      state.loading.signIn = true;
      let defaultAuthPageList = [];
      let defaultAuthBtnList = [];
      // admin 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
      let adminAuthPageList = ["admin"];
      // admin 按钮权限标识
      let adminAuthBtnList = ["btn.add", "btn.del", "btn.edit", "btn.link"];
      // test 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
      let testAuthPageList = ["test"];
      // test 按钮权限标识
      let testAuthBtnList = ["btn.add", "btn.link"];
      // 不同用户模拟不同的用户权限
      if (state.ruleForm.userName === "admin") {
        defaultAuthPageList = adminAuthPageList;
        defaultAuthBtnList = adminAuthBtnList;
      } else {
        defaultAuthPageList = testAuthPageList;
        defaultAuthBtnList = testAuthBtnList;
      }
      // 用户信息模拟数据
      const userInfos = {
        userName: state.ruleForm.userName,
        photo:
          state.ruleForm.userName === "admin"
            ? "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
            : "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg",
        time: new Date().getTime(),
        authPageList: defaultAuthPageList,
        authBtnList: defaultAuthBtnList,
      };
      // 存储 token 到浏览器缓存
      Session.set("token", Math.random().toString(36).substr(0));
      // 存储用户信息到浏览器缓存
      Session.set("userInfo", userInfos);
      // 1、请注意执行顺序(存储用户信息到vuex)
      store.dispatch("userInfos/setUserInfos", userInfos);
      if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
        // 前端控制路由，2、请注意执行顺序
        await initFrontEndControlRoutes();
        signInSuccess();
      } else {
        // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
        // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
        await initBackEndControlRoutes();
        // 执行完 initBackEndControlRoutes，再执行 signInSuccess
        signInSuccess();
      }
    };

    const handleLogin = async () => {
      formRef.value.validate((valid) => {
        if (valid) {
          // 先禁用表单
          //state.loading.signIn = true;
          // 调用登录方法 获取到用户信息[token,名称,头像,角色,权限,登录跳转路由path]
          login({
            username: state.loginForm.userName.trim(),
            password: state.loginForm.password.trim(),
            code: state.loginForm.code,
            uuid: state.loginForm.uuid
          })
            .then((res) => {
              //(res)
              // 登录成功后 保存信息到vuex
              const userInfos = res.data;
              //console.log("保存信息到session");
              Session.set("token", Math.random().toString(36).substr(0));
              // 存储用户信息到浏览器缓存
              Session.set("userInfo", userInfos);

              //console.log(userInfos);
              store.dispatch("userInfos/setUserInfos", userInfos);
              // 初始化路由数据
              initBackEndControlRoutes().then(() => {
                //console.log(router.getRoutes());
                state.loading.signIn = false;
                signInSuccess();
              });
            })
            .catch((error) => {
              // 登录异常
              state.loading.signIn = false;
              ElMessage.error(error);
            });
        }
      });
    };

    // 登录成功后的跳转
    const signInSuccess = () => {
      // 初始化登录成功时间问候语
      //let currentTimeInfo = currentTime.value;
      // 登录成功，跳到转首页
      // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
      // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
      //debugger;
      //(route);
      //console.log(router.getRoutes());
      if (route.query?.redirect) {
        router.push({
          path: route.query?.redirect,
          query:
            Object.keys(route.query?.params).length > 0
              ? JSON.parse(route.query?.params)
              : "",
        });
      } else {
        router.push("/");
      }
      // 登录成功提示
      setTimeout(() => {
        // 关闭 loading
        //state.loading.signIn = true;
        //const signInText = t("message.signInText");
        //ElMessage.success(`${currentTimeInfo}，${signInText}`);
        // 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
        proxy.mittBus.emit("onSignInClick");
      }, 300);
    };

    const handleLogin2 = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          try {
              store.dispatch("userInfos/Login", state.loginForm).then(() => {
                  store.dispatch("userInfos/GetInfo").then(() => {
                    // 初始化路由数据
                      initBackEndControlRoutes().then(() => {
                        state.loading.signIn = false;
                        signInSuccess();
                      });
                  });
              }).catch((error) => {
                  console.log(error)
                  getCode()
              })
              
            } catch (error) {
              //console.log(error);
              console.log('错误')
              ElMessage.error(error);
              getCode()
          }

        }
      });
    };

    const getCode = () => {
        getCodeImg().then(res => {
                state.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
                if (state.captchaOnOff) {
                  state.codeUrl = "data:image/gif;base64," + res.img;
                  state.loginForm.uuid = res.uuid;
                }
              });
    }

    getCode();

    watch(
      () => route,
      () => {
        //console.log("路由变化");
        state.redirect = route.query && route.query.redirect;
      },
      { immediate: true }
    );

    return {
      ...toRefs(state),
      handleLogin,
      handleLogin2,
      onSignIn,
      getCode,
      formRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.login-content-form {
  margin-top: 20px;
  .login-content-password {
    display: inline-block;
    width: 25px;
    cursor: pointer;
    &:hover {
      color: #909399;
    }
  }
  .login-content-code {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .login-content-code-img {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #ffffff;
      border: 1px solid rgb(220, 223, 230);
      color: #333;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 5px;
      text-indent: 5px;
      text-align: center;
      cursor: pointer;
      transition: all ease 0.2s;
      border-radius: 4px;
      user-select: none;
      &:hover {
        border-color: #c0c4cc;
        transition: all ease 0.2s;
      }
    }
  }

  // .login-content-code {
  //   width: 33%;
  //   height: 38px;
  //   float: right;
  //   img {
  //     cursor: pointer;
  //     vertical-align: middle;
  //   }
  // }
  .login-content-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 15px;
  }
}
// .login-content-code-img {
//   height: 38px;
// }
</style>
